<template>
  <div class="footer-container">
    <div class="footer">
      <div class="top">
        <h1>Thank you for watching ~</h1>
        <p>这是我的数码产品展示系统</p>
      </div>
      <div class="foot">
        <div class="icon" style="border-color: #d81e06">
          <i class="iconfont" style="color: #d81e06">&#xe666;</i>
        </div>
        <div class="icon" style="border-color: #28c445">
          <i class="iconfont" style="color: #28c445">&#xe607;</i>
        </div>
        <div class="icon" style="border-color: #666666">
          <i class="iconfont" style="color: #666666">&#xe8db;</i>
        </div>
        <div class="icon" style="border-color: #20b0e3">
          <i class="iconfont" style="color: #20b0e3">&#xe609;</i>
        </div>
      </div>
      <div class="info">
        <h1 class="title">Home</h1>
        <h1 class="title">About</h1>
        <h1 class="title">Services</h1>
        <h1 class="title">Projects</h1>
        <h1 class="title">Blog</h1>
        <h1 class="title">Contact Us</h1>
      </div>
      <div class="last">Copyrights® All Rights Reserved By yizz</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  background-color: rgb(255, 255, 255);
  padding-top: 50px;
}
.top {
  color: rgb(110, 110, 110);
  margin-top: 15px;
  p {
    color: rgb(168, 168, 168);
    margin-top: 10px;
  }
}
.foot {
  display: flex;
  width: 400px;
  margin: 20px auto;
  justify-content: space-around;
  .icon {
    border: 2px solid black;
    border-radius: 5px;
    cursor: pointer;
    i {
      display: inline-block;
      margin: 10px;
    }
  }
}
.info {
  display: flex;
  width: 700px;
  //   background-color: antiquewhite;
  margin: 0 auto;
  margin-top: -20px;
  justify-content: space-around;
  h1 {
    font-size: 25px;
    cursor: pointer;
  }
}
.last {
  margin-top: -50px;
}
</style>